import { InfoCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip } from 'antd';
import React from 'react';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';


const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: any }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={'实时排队量'}
        action={
          <Tooltip
            title={'实时排队数量'}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={() => visitData?.n_queued}
        contentHeight={46}
      >
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={'签入坐席量'}
        action={
          <Tooltip
            title={'签入坐席量'}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={() => visitData.n_login}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={'当日呼入量'}
        action={
          <Tooltip
            title={'当日呼入量'}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={() => visitData.n_acc_trunks_ib}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={'当日流失量'}
        action={
          <Tooltip
            title={'当日流失量'}
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={() => visitData?.run_off == 0 ? 0 : visitData?.run_off}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
  </Row>
);

export default IntroduceRow;
